<a (click)="showDetailsDrawer()">测试步骤</a>

<nz-drawer [nzMaskClosable]="false" [nzVisible]="visible" nzPlacement="right" (nzOnClose)="close()" [nzWidth]="1200">
  <ng-container *nzDrawerContent>

    <div nz-row>
      <!-- 顶部 -->
      <div nz-col nzSpan="22">
        <h2>
          <nz-breadcrumb>
            <nz-breadcrumb-item>{{scenario}}</nz-breadcrumb-item>
            <nz-breadcrumb-item>测试用例</nz-breadcrumb-item>
          </nz-breadcrumb>
        </h2>
      </div>
      <div nz-col nzSpan="1">
        <button nz-button nzType="primary" (click)="addStep()">新增测试步骤</button>
      </div>
    </div>

    <!-- 展示表格 -->
    <nz-table #editRowTable nzBordered [nzData]="tableData" nzTableLayout="fixed" [nzFrontPagination]="false">
      <thead>
        <tr>
          <th nzWidth="6%">步骤</th>
          <th nzWidth="30%">
            元素id
            <span nz-tooltip nzTooltipTitle="元素选择器, 目前支持id class 等选择器" nz-icon nzType="question-circle"
              nzTheme="outline">
            </span>
          </th>
          <th nzWidth="14%">
            操作类型
            <!-- <span 
              nz-tooltip
              nzTooltipTitle=""
              nz-icon 
              nzType="question-circle" 
              nzTheme="outline">
            </span> -->
          </th>
          <th nzWidth="20%">操作描述</th>
          <th nzWidth="15%">值
            <span nz-tooltip [nzTooltipTitle]="titleTemplate" nz-icon nzType="question-circle" nzTheme="outline">
            </span>
          </th>
          <ng-template #titleTemplate>
            <p>当操作类型是<i>输入</i>的时候,本栏指输入的值;</p>
            <p>当操作类型是<i>检查页面元素</i>的时候, 本栏指要检查的值;</p>
            <p>当操作类型是<i>等待</i>的时候, 本栏指等待的毫秒数;</p>
          </ng-template>
          <th nzWidth="15%">Action</th>
        </tr>
      </thead>
      <tbody cdkDropList (cdkDropListDropped)="drop($event)">
        <tr *ngFor="let data of editRowTable.data; let i = index" cdkDrag>

          <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
            <td style="cursor: move;">{{ data.sort }}</td>
            <td>{{ data.elementId }}</td>
            <td>{{ getActionNameByType(data.type) }}</td>
            <td>{{ data.description }}</td>
            <td>{{ data.value }}</td>
            <td>
              <a (click)="startEdit(data.id)">编辑</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a nz-popconfirm nzPopconfirmTitle="确定删除本步操作?" (nzOnConfirm)="deleteStep(data, i)">删除</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="copyStep(data)">复制</a>
            </td>
          </ng-container>

          <ng-template #editTemplate>
            <td style="cursor: move;">
              {{editCache[data.id].data.sort}}
              <!-- <input style="width: 30px;" type="text" nz-input [(ngModel)]="editCache[data.id].data.sort" /> -->
            </td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.elementId" /></td>
            <td>
              <nz-select style="width: 150px;" [(ngModel)]="editCache[data.id].data.type">
                <nz-option *ngFor="let o of actionTypes" [nzValue]="o.type" [nzLabel]="o.name"></nz-option>
              </nz-select>

              <!-- <input type="text" nz-input [(ngModel)]="editCache[data.id].data.type" /> -->
            </td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.description" /></td>
            <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.value" /></td>

            <td>
              <a (click)="saveEdit(data)" class="save">保存</a>
              <nz-divider nzType="vertical"></nz-divider>
              <a (click)="cancelEdit(data.id)">取消编辑</a>
            </td>
          </ng-template>
        </tr>
      </tbody>
    </nz-table>

  </ng-container>
</nz-drawer>